// let cook = getCookie('id');
// console.log(cook);

// 从后台读取数据进行渲染
ajax({
    url: '../js/selectdetails.php',
    dataType: 'json',
    data: { id: getCookie('id') },
    success(res) {
        // console.log(res);
        let msg = res[0];
        // console.log(msg);
        // 渲染4个细节图
        $('.img1 img').attr('src', `../images/${msg.id}imgs/1.jpg`);
        $('.img2 img').attr('src', `../images/${msg.id}imgs/2.jpg`);
        $('.img3 img').attr('src', `../images/${msg.id}imgs/3.jpg`);
        $('.img4 img').attr('src', `../images/${msg.id}imgs/4.jpg`);

        // 渲染主图
        $('.content .center img').attr('src', `../images/${msg.id}.png`);
        $('.content .right .color img').attr('src', `../images/${msg.id}.png`)

        // 渲染主图右侧详情信息
        $('.spanname').text(msg.name);
        $('.spanid').text('产品编号：' + msg.id);
        $('.pricespan').text(msg.price);
        // console.log(msg.l, msg.s, msg.m);
        // $('.ss').text(msg.s);
        // $('.mm').text(msg.m);
        // $('.ll').text(msg.l);
        // 判断选择的是s/m/l码，显示对应码数的库存量
        // console.log($('.right .countstock .stockcount'));
        // console.log("****");
        $('.stockcount').text(msg.l);

        // 渲染商品详情信息
        $('.infomation .center p:first-of-type').text(msg.info);       
    }
})
// console.log("^^^^");

// 给增加减少商品添加点击事件
$('.plus').click(function(e){
    let that = e.target;
    // 将禁用的 - 解除
    $('.sub').prop('disabled', false);
    let n = $('.numcount').text();
    let stock = $('.stockcount').text();
    n++;
    if (n > stock) {
        n = stock;
        layer.msg('超出库存');
        $(that).prop('disabled', true);
    }
    $('.numcount').text(n);
    // ajax({
    //     url:'../js/setstock.php',
    //     method:'get',
    //     data:{l:n},
    //     success(res){
    //         console.log(res);
    //     }
    // })
})
// console.log($('.sub'));
$('.sub').click(function(e){
    // console.log("****");
    let that = e.target;
    // 将禁用的 + 解除
    $('.plus').prop('disabled', false);
    let n = $('.numcount').text();
    n--;
    if (n < 1) {
        n = 1;
        layer.msg('购买数量最少为1');
        $(that).prop('disabled', true);
    }
    $('.numcount').text(n);
})

// 加入购物车添加点击事件
$('.shoppingcar').click(function(){
    // 通过cookie获取用户信息
    var username = getCookie('username');
    if (!username) {
        // alert("***");
        sessionStorage.setItem('url', location.href);
        return layer.msg('请先登录', { time: 1000 }, () => { location.href = 'login.html' });
    }
    // 将商品id 加入购物车
    // 获取商品的id 和 加入购物车商品的数据量
    let id = getCookie('id');
    let n = $('.numcount').text();
    let car = { username, id, n } // 组装这个 购物车数据
        // 获取 本地购物车数据，进行判断
    let carData = localStorage.getItem('data');
    if (!carData || !carData.length) { // 本地购物车没有数据
        localStorage.setItem('data', JSON.stringify([car]));
        // 修改数据库中库存信息
        let l = $('.stockcount').text()-n;
        // console.log(l,id);
        ajax({
            url:'../js/setstock.php',
            method:'get',
            data:{
                l,
                id
            },
            dataType:'json',
            success(res){
                // console.log(res);
                let {meta} = res;
                if(meta.status){
                    $('.stockcount').text(l);
                }
            }
        })
        layer.msg('加入购物车成功');
        return;
    }
    // 如果 本地购物车 有数据，转为数组
    let carData1 = JSON.parse(carData);
    // 判断 本地购物车 之前是否有添加这个商品
    let res = carData1.findIndex(v => v.username === username && v.id === id);
    if (res === -1) { // 说明之前没有添加这个商品到购物车,则将当前的这个商品数据添加到本地购物车
        carData1.push(car);
        // 修改数据库中库存信息
        let l = $('.stockcount').text()-n;
        // console.log(l,id);
        ajax({
            url:'../js/setstock.php',
            method:'get',
            data:{
                l,
                id
            },
            dataType:'json',
            success(res){
                // console.log(res);
                let {meta} = res;
                if(meta.status){
                    $('.stockcount').text(l);
                }
            }
        })
        layer.msg('加入购物车成功');
        localStorage.setItem('data', JSON.stringify(carData1));
        return;
    }
    // 代码执行到此处，说明 之前已经将这个商品 添加过本地购物车
    // 找到之前添加的 购物车数据
    let car1 = carData1.find(v => v.username === username && v.id === id);
    // 将 当前 的购物数添加到购物车中
    let num = (car1.n - 0) + (n - 0);
    if (num > $('.stockcount').text() - 0) return layer.msg('超出库存量');
    // 将购物的数量 写入数组中的对象中，然后将数据转为json存入购物车
    car1.n = num;
    // 修改数据库中库存信息
    let l = $('.stockcount').text()-n;
    // console.log(l,id);
    ajax({
        url:'../js/setstock.php',
        method:'get',
        data:{
            l,
            id
        },
        dataType:'json',
        success(res){
            // console.log(res);
            let {meta} = res;
            if(meta.status){
                $('.stockcount').text(l);
            }
        }
    })
    layer.msg('加入购物车成功');
    localStorage.setItem('data', JSON.stringify(carData1));
})

// 立即购买进入购物车添加点击事件
$('.shop').click(function(){
    // 通过cookie获取用户信息
    var username = getCookie('username');
    if (!username) {
        sessionStorage.setItem('url', location.href);
        layer.msg('请先登录', { time: 1000 }, () => { location.href = './login.html' });
    } else {
        location.href = '../html/shopping.html';
    }
    return false; // 阻止默认跳转
})


// 放大镜效果
// 获取元素
var zoom = document.getElementById("zoom");
var glass = document.querySelector(".glass");
var bigArea = document.querySelector(".bigArea");
var bigImg = document.querySelector(".bigArea img");
// 获取zoom到页面两边的距离
var obj = offset(zoom);

//  获取比例
var rate = 0;
// 添加鼠标进入
zoom.onmouseenter = function () {
    // console.log("**");
  // 显示镜片
  glass.style.display = "block";
  // 显示大图区域
  bigArea.style.display = "block";
  rate = bigArea.clientWidth / glass.clientWidth;
};
// 添加鼠标离开
zoom.onmouseleave = function () {
  glass.style.display = "none";
  bigArea.style.display = "none";
};

// 添加移动事件
zoom.onmousemove = function (e) {
  // 计算鼠标在元素内的位置
  var resultX = e.pageX - obj.left - glass.clientWidth / 2;
  var resultY = e.pageY - obj.top - glass.clientHeight / 2;

  // 判定
  if (resultX < 0) {
    resultX = 0;
  } else if (resultX > zoom.clientWidth - glass.clientWidth) {
    resultX = zoom.clientWidth - glass.clientWidth;
  }

  if (resultY < 0) {
    resultY = 0;
  } else if (resultY > zoom.clientHeight - glass.clientHeight) {
    resultY = zoom.clientHeight - glass.clientHeight;
  }

  // 将元素移动到该鼠标位置
  glass.style.left = resultX + "px";
  glass.style.top = resultY + "px";

  // 设置大图的移动距离
  bigImg.style.left = -resultX * rate + "px";
  bigImg.style.top = -resultY * rate  + "px";
};

// 定义一个函数 求任何一个元素到页面的距离
function offset(element) {
  // 定义一个对象
  var obj = {
    // 该元素从自己的外边框到页面的距离(左侧)
    left: 0,
    // 该元素从自己的外边框到页面的距离(上侧)
    top: 0,
  };

  // 使用while循环 逐层往上层计算
  while (element != document.body) {
    // console.log(element);
    //   计算每一层的定位值 与 边框宽度
    obj.left += element.offsetLeft + element.clientLeft;
    obj.top += element.offsetTop + element.clientTop;

    // 将element变量指向它的定位父元素
    element = element.offsetParent;
  }

  return obj;
}


// 给left中的小图添加点击事件
$('.content .left div>img').click(function(){
    $(this).parents().css('border-color','#000')
    $(this).parents().siblings().css('border-color','#fff');
    let imgn = $(this).parents().index()+1;
    // console.log(imgn);
    let id = getCookie('id');
    // console.log(id);
    // console.log($('.center>img'));
    $('.center .zoom img').attr('src',`../images/${id}imgs/${imgn}.jpg`)
})

// 完成四级联动 配送地址
  // 获取所有省份，并渲染
  async function getAddress(){
    let pros = await pAjax({
      url:'../js/province.php',
      dataType:'json'    
    })
    let res = pros.map(v=>`<option value="${v.province_id}">${v.name}</option>`).join()    
    // console.log(res);
    $('#pro').html($('#pro').html()+res);
    // 渲染后的省份下拉，添加一个change事件
    $('#pro').change( async function(){
      let pid = $(this).val();
      // 请求对应省份的所有城市
      let citys = await pAjax({
        url:'../js/city.php',
        data:{pid},
        dataType:'json'
      })
      let res = citys.map(v=>`<option value="${v.city_id}">${v.name}</option>`).join()
      $('#city').html('<option value="城市">城市</option>'+res);      
    })
    // 渲染后的城市下拉，添加一个change事件
    $('#city').change( async function(){
      let cid = $(this).val();
      // 请求对应省份的所有城市
      let areas = await pAjax({
        url:'../js/area.php',
        data:{cid},
        dataType:'json'
      })
      let res = areas.map(v=>`<option value="${v.area_id}">${v.name}</option>`).join()
      $('#area').html('<option value="地区">地区</option>'+res);      
    })
    // 渲染后的地区下拉，添加一个change事件
    $('#area').change( async function(){
      let aid = $(this).val();
      // 请求对应省份的所有城市
      let towns = await pAjax({
        url:'../js/town.php',
        data:{aid},
        dataType:'json'
      })
      let res = towns.map(v=>`<option value="${v.town_id}">${v.name}</option>`).join()
      $('#town').html('<option value="街道">街道</option>'+res);      
    })
  }
  getAddress()